<template>
	<scroll-view scroll-y style="height: 100%;" @scrolltolower="scrolltolower">
		<view class="flex-col section_3" v-if="items.length>0" v-for="item in items" :key="item.id"
			:style="item.highlighted?'background-color:#ffb4b4':''">
			<view class="flex-row items-center self-stretch group_3">
				<view class="flex-col flex-1 tems-center" @click="copyNo(item)">
					<view class="flex-row items-center">
						<text class="font_2 text_6">单号：{{item.order.id}}</text> <u-icon name="/static/icons/copy.png"
							size="20"></u-icon>

					</view>
					<view>
						<text class="font" style="font-size: 24rpx; color: #888;">{{fotmatDate(item.createdAt)}}</text>
					</view>
				</view>
				<view style="text-align: right; ">
					<text class="font_3 text_9"
						style="color: #ff0101;font-weight: bold;">{{getOrderStatus(item.status)}}</text>
				</view>

			</view>
			<view class="flex-row justify-between items-center self-stretch group_4" @click="goOrderDetails(item)">
				<view class="flex-row items-center flex-1">
					<image class="image_3" :src="item.product.meta.imageUrl" />
					<view class="flex-col group_5 ml-17 flex-1">
						<text class="self-stretch font_2 text_8"
							style="padding-left: 20rpx; line-height: 36rpx;">{{item.product.name}}</text>
						<view class="flex-row" style="padding-top: 20rpx; padding-left: 20rpx;">
							<u-avatar size="20" :src="item.buyer.meta.avatar"></u-avatar>
							<view style="font-size: 28rpx; color:#888;">
								{{item.buyer.nickname}}{{item.buyer.mobile}}
							</view>
						</view>


					</view>

				</view>
				<view style="text-align: center; " class="flex-col items-center justify-center">
					<view class="flex-col items-center self-stretch group_6">
						<text class="font_3 text_11">￥{{formatMoney(item.order.totalPrice)}}</text>

						<text class="ml-6 text_12" style="font-size: 28rpx;">共{{item.order.quantity}}件</text>
					</view>
				</view>

			</view>

			<view class="self-stretch divider" v-if="item.actions.length>0"></view>
			<view class="flex-row justify-start items-center self-end" style="padding-top: 20rpx;">

				<button size="mini" class="orderbtn" @click="goOrderDetails(item)">查看详情</button>
				<!-- 			<button size="mini" type="primary" class="orderbtn" v-for="(a,index) in item.actions"
					@click="doAction(a,item)">

				</button> -->


			</view>


		</view>
		<u-loadmore :status="status" v-if="status=='loading'||items.length>0"></u-loadmore>
		<u-empty v-if="status=='nomore'&&items.length==0"></u-empty>
	</scroll-view>


</template>

<script>
	import Utils from '../common/Utils';
	export default {
		name: "order-item",
		data() {
			return {
				status: "loading",
				totalPage: 0,
				pageSize: 10,
				curpage: 0,
				items: [],
				searchForm: {},
				apiUrl: {},
			};
		},
		props: {
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			tabs: [],
			url: "",
			payCloseMinute: {
				type: Number,
				default: function() {
					return 0
				}
			},
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
		},
		methods: {
			formatMoney(m) {

				return m ? m.toFixed(2) : '0.00'
			},
			goOrderDetails(order) {
				uni.navigateTo({
					url: `/pages-aftersales/AfterDetails/AfterDetails?id=${order.id}`
				})
			},
			doAction(action, order) {
				let _that = this;
			},

			getOrderBtn(action) {
				return Utils.getOrderBtn(action);
			},
			getOrderStatus(status) {
				return Utils.getAfterStatus(status);
			},
			scrolltolower() {
				if (this.curpage >= this.totalPage) {
					this.status = 'nomore'
					return;
				}
				this.curpage++;
				this.searchForm.pageNo = this.curpage;
				this.searchData()

			},
			reSearch(searchForm, url) {

				this.searchForm = searchForm;
				this.apiUrl = url;
				this.curpage = 0;
				this.items = [];
				this.searchData()
			},
			reLoad() {
				this.curpage = 0;
				this.searchForm.pageNo = 0;
				this.items = [];
				this.searchData();
			},
			searchData() {
				this.status = 'loading'
				this.$get({
					url: this.apiUrl,
					data: this.searchForm
				}).then(res => {
					console.log(res);
					this.totalPage = res.totalPages;
					this.items = this.items.concat(res.content);
					if (res && res.last) {
						this.status = 'nomore'
					}
					this.$emit("loaded", true);

				})
			},
			copyNo(item) {
				uni.setClipboardData({
					data: item.id,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				})
			},
			fotmatDate(date) {
				return Utils.formatDate(date, 'yyyy-MM-dd HH:mm:ss')
			}
		}
	}
</script>

<style scoped lang="scss">
	button:nth-child(1) {
		background-color: darkcyan;
		color: #ffffff;
		margin-right: 10rpx;
	}

	button:nth-child(2) {
		background-color: orange;
		color: #ffffff;
		margin-right: 10rpx;
	}

	button:nth-child(3) {
		background-color: #ff0101;
		color: #ffffff;
		margin-right: 10rpx;
	}

	.section_3 {
		margin: 20rpx;
		padding: 13.95rpx 10.47rpx 22.67rpx;
		background-color: #ffffff;
		border-radius: 17.44rpx;

		.group_3 {
			margin-left: 3.49rpx;

			.text_6 {
				color: #000000;
				line-height: 22.34rpx;
			}

			.text_7 {
				color: #888888;
				width: 223.26rpx;
			}
		}

		.group_4 {
			margin-top: 20.93rpx;

			.image_3 {
				border-radius: 8.72rpx;
				width: 139.53rpx;
				height: 139.53rpx;
			}

			.group_5 {
				margin: 6.98rpx 0;

				.text_8 {
					color: #575757;
					line-height: 22.52rpx;
					font-weight: bold;
					padding: 0 10rpx;
				}

				.text_10 {

					color: #808080;
					line-height: 26.76rpx;
				}

				.group_6 {

					padding: 20rpx 10rpx;

					.text_11 {
						line-height: 23.83rpx;
					}

					.text_12 {
						color: #000000;
						font-size: 24.42rpx;
						font-family: SourceHanSansCN;
						line-height: 18.21rpx;
					}
				}
			}

			.font_3 {
				font-size: 31.4rpx;
				font-family: SourceHanSansCN;
				color: #ff0101;
			}

			.text_9 {
				margin-right: 24.42rpx;
				font-weight: 700;
				line-height: 29.55rpx;
			}
		}

		.divider {
			margin: 27.91rpx 10.47rpx 0;
			background-color: #e8e8e8;
			height: 1.74rpx;
		}

		.text-wrapper_2 {
			margin-top: 24.42rpx;
			padding: 10.47rpx 0;
			background-color: #43cf7c;
			border-radius: 17.44rpx;
			width: 139.53rpx;

			.text_13 {
				line-height: 22.57rpx;
			}
		}
	}

	.font_2 {
		font-size: 28.42rpx;
		font-family: SourceHanSansCN;
		line-height: 22.69rpx;
		color: #ffffff;
	}

	.font {
		font-size: 28.42rpx;
		font-family: SourceHanSansCN;
		line-height: 29.65rpx;
	}
</style>